// 原型对象封装
// 
function BigImg(obj) {
    var {shadow, showGoods, bigImg, smallImg, scaleGoods, liList} = obj;
    this.shadow = shadow;
    this.showGoods = showGoods;
    this.bigImg = bigImg;
    this.smallImg = smallImg;
    this.scaleGoods = scaleGoods;
    this.liList = liList;
}
// 函数整体调用，把所有需要调用的函数都放到这里来
BigImg.prototype.init = function () {
    this.enter();
    this.change();
    // this.windSize();
}
// 鼠标划入时
BigImg.prototype.enter = function () {
    this.showGoods.onmouseenter = () => {
        this.shadow.style.display = "block";
        this.scaleGoods.style.display = "block";
        var maxLeft = this.showGoods.clientWidth - this.shadow.clientWidth;
        var maxTop = this.showGoods.clientHeight - this.shadow.clientHeight;
        this.maxLeft = maxLeft;
        this.maxTop = maxTop;
        var scale = this.showGoods.clientWidth / this.shadow.clientWidth;
        this.scale = scale;
        // console.log(this.maxLeft,this.maxTop,this.scale);
    }
    this.move();
    this.leave();
}
// 鼠标离开时
BigImg.prototype.leave = function () {
    this.showGoods.onmouseleave = () => {
        this.shadow.style.display = "none";
        this.scaleGoods.style.display = "none";
    }
}
// 鼠标滑动时
BigImg.prototype.move = function () {
    this.showGoods.onmousemove = e => {
        var e = e || window.event;
        var x = e.pageX - this.showGoods.offsetLeft - this.shadow.clientWidth / 2;
        var y = e.pageY - this.showGoods.offsetTop - this.shadow.clientHeight / 2;
        // console.log(x, y);
        // 判断是否超出范围
        if (x < 0) x = 0;
        if (y < 0) y = 0;
        if (x > this.maxLeft) x = this.maxLeft;
        if (y > this.maxTop) y = this.maxTop;

        this.shadow.style.left = x + "px";
        this.shadow.style.top = y + "px";

        this.bigImg.style.left = x * -this.scale + "px";
        this.bigImg.style.top = y * -this.scale + "px";
    }
}
// BigImg.prototype.windSize = function () {
//     window.onresize = () => {
//         this.clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
//         this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
//         console.log(this.clientWidth,this.clientHeight);
//     }
// }
// 需要改变图片时
BigImg.prototype.change = function () {
    var smallImgList = ["../images/girlsmall1.jpg", "../images/girlsmall2.jpg", "../images/girlsmall3.jpg", "../images/girlsmall4.jpg"];
    var bigImgList = ["../images/girlbig1.jpg", "../images/girlbig2.jpg", "../images/girlbig3.jpg", "../images/girlbig4.jpg"];
    for (let i = 0; i < this.liList.length; i++) {
        let li = this.liList[i];
        li.onmousemove = () => {
            for (var j = 0; j < this.liList.length; j++) {
                this.liList[j].className = "";
            }
            this.liList[i].className = "active";
            // console.log(i);
            this.smallImg.src = smallImgList[i];
            this.bigImg.src = bigImgList[i];  
            // console.log(smallImgList[i]);
        }
    }
}